@primaryColor: #2080f0;
@successColor: #18a058;
@dangerColor: #d03050;
@warningColor: #f0a020;

@borderColor: #dcdee0;
@backgroundColor: #fff;
@textColor: #323233;
@textColor5: #fff;
@textColor2: #969799;
@placeholder: #969799;
@disabledOpacity: 0.5;
@borderRadius: 2px;
@colorGray: #f2f3f5;
@textColor: #323233;

.o-select {
  margin-right: 1px;
  border-radius: 3px;
  @apply w-full dark:bg-zinc-500 bg-zinc-50 box-border rounded;
  box-sizing: border-box;
  width: 100%;
  z-index: 50;

  li {
    list-style: none;
    height: 34px;
    line-height: 34px;
    padding: 0 10px;
    margin: 0;
    cursor: pointer;
    width: 100%;
    display: block;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    user-select: none;

    &:hover {
      @apply bg-gray-100 dark:bg-gray-700;
    }

    &.active {
      @apply bg-gray-100 dark:bg-gray-700;
      color: @primaryColor;

      b {
        color: @backgroundColor;
      }
    }

    &.disabled {
      cursor: not-allowed;
      opacity: @disabledOpacity;
    }

    .b {
      color: @primaryColor;
      font-weight: 400;
    }
  }

  .select-empty-options {
    height: 34px;
    text-align: center;
    color: @textColor;
    margin: 0;
    padding: 0 10px;
    line-height: 34px;
  }
}